<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>第３週ミニ課題</title>
  <link rel="stylesheet" href="css/default.css">
  <!-- CSSを定義する．-->
  <style>
    /* ここから */
    .task{
      border-bottom: 1px solid blue;font-size: 18px;padding: 10px 20px;
    }
    .task>span{
      display: inline-block;width: 33%;
    }
    .task>span:nth-child(1){
      text-align: center;
      width: 20%;
    }
    .task_list{
      border-left: 1px solid blue;
      border-right: 1px solid blue;
      width: 80%;text-align: center;margin: auto;
    }
    .task_list>.task:nth-child(1){
      color: white;background: blue;
    }

    /* ここまで */
  </style>
</head>
<body>
  <div class="container">
    <!-- 各自の学生証番号と氏名で置き換えること -->
    <div class="namebox">26001904662<br>YAN YIPEI</div>

    <h1>第３週ミニ課題</h1>
    <p>先週のミニ課題（ToDoリストの内容）を
      <code>div</code>
      と
      <code>span</code>
      のタグを用いて表現せよ．データの中身は手入力で構わない．</p>
    <p>CSSを使ってできるだけ見た目を整えてみよ．</p>
    <hr class="answer">
    <!-- ここから -->
    <div class="task_list">
      <div class="task">
        <span>id</span><span>completed</span><span>task</span>
      </div class="task">
      <div class="task">
        <span>0</span><span>true</span><span>実行済のタスク</span>
      </div>
      <div class="task">
        <span>1</span><span>false</span><span>これから実行するタスク</span>
      </div>
    </div>

    <!-- ここまで -->
  </div>
</body>
</html>
